
<template>
  <a-drawer
    v-model:visible="vdata.isShow"
    :title="vdata.isAdd ? '新增广告' : '编辑广告'"
    width="50%"
    :mask-closable="false"
    @close="vdata.isShow = false"
  >
    <a-form ref="infoFormModel" :model="vdata.saveObject" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }" :rules="rules">
      <a-row justify="center" type="flex">
        <a-col :span="24">
          <a-form-item label="标题" name="title">
            <a-input v-model:value="vdata.saveObject.title" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="状态" name="releaseState">
            <a-radio-group v-model:value="vdata.saveObject['releaseState']">
              <a-radio :value="1">
                立即发布
              </a-radio>
              <a-radio :value="0">
                手动发布
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider orientation="left">轮播设置</a-divider>
      <a-col :span="24">
        <a-button
          class="editable-add-btn"
          style="margin-bottom: 8px;margin-left: 30px;"
          type="dashed"
          @click="handleAdd"
        >
          <PlusOutlined />新增
        </a-button>
        <a-table bordered :data-source="vdata.saveObject.infoList" :columns="columns">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'imgUrl'">
              <div class="editable-cell">
                <div class="editable-cell-input-wrapper">
                  <JeepayUpload v-model:src="record.imgUrl" bizType="notice" listType="picture-card" />
                </div>
              </div>
            </template>
            <template v-else-if="column.dataIndex === 'sort'">
              <div class="editable-cell-input-wrapper">
                <a-input-number v-model:value="record.sort" :min="0" :max="10" />
              </div>
            </template>
            <template v-else-if="column.dataIndex === 'linkUrl' && vdata.groupKey != 'faceAdvert'">
              <div class="editable-cell-input-wrapper">
                <a-input v-model:value="record.linkUrl" placeholder="请以http://或https://开头" />
              </div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
              <a style="color: red" @click="onDelete(record)">删除</a>
            </template>
          </template>
        </a-table>
      </a-col>

      <div v-if="vdata.isAdd">
        <a-row v-if="vdata.groupKey == 'faceAdvert'" justify="center" type="flex">
          <a-divider orientation="left">所属商户配置</a-divider>
          <a-col :span="24">
            <a-form-item label="发布商户" name="bindType">
              <a-space>
                <a-radio-group v-model:value="vdata.saveObject.bindType">
                  <a-radio :value="0">全部商户</a-radio>
                  <a-radio :value="1">指定商户</a-radio>
                </a-radio-group>
                <a-button v-if="vdata.saveObject.bindType == 1" type="primary" @click="showQrcSelectModel">选择商户</a-button>
              </a-space>
            </a-form-item>
          </a-col>
          <a-col v-if="vdata.saveObject.bindType == 1" :span="24">
            <a-form-item label="所属商户" name="infoIds">
              <a-textarea v-model:value="vdata.saveObject.infoIds" disabled />
            </a-form-item>
          </a-col>
        </a-row>
      </div>
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="vdata.isShow = false"><close-outlined /> 取消</a-button>
      <a-button type="primary" :loading="vdata.confirmLoading" @click="handleOkFunc"><check-outlined /> 保存</a-button>
    </div>
  </a-drawer>
  <!-- 选择商户组件 -->
  <JeepayModelSelectMchList ref="jeepayModelSelectMchRef" @selectFinishFunc="selectQrcFinishFunc" />
</template>
<script lang="ts" setup>
import { req, API_URL_ADVERT } from '@/api/manage'
import { reactive, ref, getCurrentInstance, computed } from 'vue'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const infoFormModel = ref()
const jeepayModelSelectMchRef = ref()

const props = defineProps({
  callbackFunc: { type: Function, default: () => { } }
})

const columns = [
    { title: '广告图片(建议尺寸800x1280px)', dataIndex: 'imgUrl', width: '35%', },
    { title: '轮播排序', dataIndex: 'sort', },
    { title: '操作', dataIndex: 'operation', },
  ]

const vdata = reactive({
  confirmLoading: false, // 显示确定按钮loading图标
  isAdd: true, // 新增 or 修改页面标识
  isShow: false, // 是否显示弹层/抽屉
  saveObject: {infoList: [{ imgUrl: '', linkUrl: '', sort: '' }]} as any, // 数据对象
  recordId: null, // 更新对象ID
  groupKey: '',
})

const rules = {
  title: [{ required: true, message: '请输入广告标题', trigger: 'blur' }],
  releaseState: [{ required: true, message: '请选择发布状态', trigger: 'blur' }],
  imgUrl: [{ required: true, message: '请上传广告图片', trigger: 'blur' }],
  linkUrl: [{ required: true, message: '请输入广告链接', trigger: 'blur' }],
  content: [{ required: true, message: '请输入广告内容', trigger: 'blur' }],
  bindType: [{ required: true, message: '请选择发布商户类型', trigger: 'blur' }],
  infoIds: [{ required: true, message: '请选择要发布的商户', trigger: 'blur' }],
  advertSort: [{ required: true, message: '请输入广告排序', trigger: 'blur' }],
  changeTime: [{ required: true, message: '请输入轮播时间', trigger: 'blur' }],
}


function show(groupKey, recordId) { // 弹层打开事件
  if (infoFormModel.value !== undefined) {
    infoFormModel.value.resetFields()
  }
  vdata.groupKey = groupKey
  vdata.isAdd = !recordId

  // 数据恢复为默认数据
  vdata.saveObject = { bindType: 0, releaseState: 1 }
  vdata.saveObject.infoList = [{ imgUrl: '', linkUrl: '', sort: '' }]
  vdata.saveObject.infoIds = ''

  vdata.confirmLoading = false // 关闭loading

  if (!vdata.isAdd) { // 修改信息 延迟展示弹层
    vdata.recordId = recordId
    req.getById(API_URL_ADVERT, recordId).then(res => {
      vdata.saveObject = res
      if (vdata.saveObject.appContent) {
        vdata.saveObject.infoList = JSON.parse(vdata.saveObject.appContent)
      }
    })
  }
  vdata.isShow = true // 立马展示弹层信息
}

function handleOkFunc() { // 点击【确认】按钮事件
  infoFormModel.value.validate().then(valid => {

    vdata.confirmLoading = true // 显示loading
    if (vdata.saveObject.infoList.length < 1) {
      vdata.confirmLoading = false
      return $infoBox.message.error('轮播配置不可为空')
    } 
    vdata.saveObject.advertType = '1'
    if (vdata.saveObject.infoList) {
      var firstInfo = vdata.saveObject.infoList[0]
      if (!firstInfo.imgUrl) {
        vdata.confirmLoading = false
        return $infoBox.message.error('轮播图不可为空')
      }
      vdata.saveObject.imgUrl = firstInfo.imgUrl
      vdata.saveObject.linkUrl = firstInfo.linkUrl
    }
    vdata.saveObject.appContent = JSON.stringify(vdata.saveObject.infoList)

    // 请求HTTP 
    req.addOrUpdate(vdata.isAdd ? null : vdata.recordId, API_URL_ADVERT, vdata.saveObject).then(res => {
      vdata.isShow = false
      vdata.confirmLoading = false
      props.callbackFunc() // 刷新列表
    }).catch(valid => {
      vdata.confirmLoading = false
    })
  })
}

// 选择商户弹窗
function showQrcSelectModel() {
  jeepayModelSelectMchRef.value.show(vdata.saveObject.infoIds, { advertFlag: '1' })
}

// 选择商户完成
function selectQrcFinishFunc(e) {

  if (!e || e.length <= 0) {
    return $infoBox.message.error('请选中要发布广告的商户！')
  }

  vdata.saveObject.infoIds = e.toString()
  jeepayModelSelectMchRef.value.close()
}

const count = computed(() => vdata.saveObject.infoList.length + 1)

const onDelete = (item) => {
  // vdata.saveObject.infoList = vdata.saveObject.infoList.filter(item => item.key !== key)
  const index = vdata.saveObject.infoList.indexOf(item)
  if (index != -1) {
    vdata.saveObject.infoList.splice(index, 1)
  }
}

const handleAdd = () => {
  if (vdata.saveObject.appPlaceType == '1' && vdata.saveObject.infoList.length > 1) {
    return $infoBox.message.error('卡片广告最多添加两条记录！')
  }
  const newData = { key: `${count.value}`, imgUrl: ``, sort: '', linkUrl: ``, }
  vdata.saveObject.infoList.push(newData)
}

defineExpose({ show })
</script>
<style lang="less" scoped>
  .ant-btn-dangerous {
    position: absolute;
    right: 50px;
  }
  .ant-row-space-between {
    position: relative;
  }
</style>